<template>
<div>
  <div class="back el-icon-back" @click="back"></div>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>欢迎注册数据机</span>
    </div>
    <el-form label-width="80px">
      <el-form-item label="请输入账号" label-width="20%">
        <el-input
          id="name"
          placeholder="账号"
          v-model="regusername"
          ref="name"
        ></el-input>
      </el-form-item>
      <el-form-item label="请输入密码" label-width="20%">
        <el-input
          id="word"
          placeholder="密码"
          v-model="regpassword"
          ref="word"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item label="请再次输入密码" label-width="20%">
        <el-input
          id="word"
          placeholder="密码"
          v-model="regpassword2"
          ref="word"
          show-password
        ></el-input>
      </el-form-item>
    </el-form>
    <el-button @click="register">注册</el-button>
  </el-card>
</div>

</template>

<script>
import qs from "qs";
import axios from "axios";

export default {
  name: "register",
  data() {
    return {
      regusername: "",
      regpassword: "",
      regpassword2:""
    };
  },
  methods: {
    register() {
      console.log("注册");
      if(this.regpassword!=this.regpassword2) {
        this.$message.error('两次输入的密码不一致');
      }else{

        let data = {
          username: this.regusername,
          password: this.regpassword,
        };
        axios({
          method: "post",
          url: "http://localhost:8081/api/reguser",
          data: qs.stringify({ ...data }),
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        }).then((res) => {
          console.log("数据：", res.data);
          // 账号密码正确可以跳转页面，需要向外导出token
          if (res.data.status === 0) {
            console.log("注册成功");
            this.$message({
              message: "注册成功，请用你的账号密码登录",
              type: "success",
            });
            this.$router.push({
              path: "/login",
            });
          } else {
            this.$message.error('注册失败');
          }
        });
      }
    },
    back(){
      this.$router.go(-1)
    }
  },
};
</script>

<style>
.back{
  position: fixed;
  height: 2rem;
  width: 2rem;
  border-radius:100%;
  border: 1px solid rgb(97, 90, 90);
  display: flex;
  align-items: center;
  justify-content: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  margin: 2rem auto;
  width: 32rem;
  /* text-align: cenater; */
}
.el-button {
  display: block;
  margin: 0 auto;
}
</style>